<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>摘桃子游戏</title>
    <style>
        .container {
            width: 1000px;
            margin: 20px auto;
        }
        .tree {
            position: relative;
            height: 500px;
            background: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1200 500%22%3E%3Cpath fill%3D%22%23654321%22 d%3D%22M 500 500 L 700 500 L 700 150 L 500 150 Z%22%2F%3E%3Ccircle cx%3D%22600%22 cy%3D%22200%22 r%3D%22120%22 fill%3D%22%233CB371%22%2F%3E%3Ccircle cx%3D%22550%22 cy%3D%22280%22 r%3D%22110%22 fill%3D%22%233CB371%22%2F%3E%3Ccircle cx%3D%22650%22 cy%3D%22280%22 r%3D%22110%22 fill%3D%22%233CB371%22%2F%3E%3C%2Fsvg%3E') no-repeat;
        }
        .peach {
            position: absolute;
            width: 28px;
            height: 28px;
            background: radial-gradient(circle at 65% 35%, #FFDAB9, #FFA07A);
            border-radius: 50% 60% 50% 50% / 60% 50% 50% 40%;
            border: 2px solid #FF8C00;
            box-shadow: 3px 3px 4px rgba(0,0,0,0.3);
            background-image: radial-gradient(circle at 75% 25%, rgba(255,255,255,0.4) 15%, transparent 60%);
            transform: rotate(calc(var(--i) * 10deg));
        }
        .peach::after {
            content: '';
            position: absolute;
            top: -5px;
            right: 0;
            width: 12px;
            height: 8px;
            background: #228B22;
            border-radius: 80% 20% 80% 20%;
            transform: rotate(20deg);
        }
        .people {
            display: flex;
            gap: 20px;
            margin-top: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .person {
            width: 100px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }
        .person-body {
            position: relative;
            margin: 0 auto;
        }
        .leader .person-body {
            height: 120px;
            width: 40px;
            background: #4169E1;
            border-radius: 20px 20px 5px 5px;
        }
        .worker .person-body {
            height: 90px;
            width: 35px;
            background: linear-gradient(180deg, #87CEEB, #4169E1);
            border-radius: 20px 20px 8px 8px;
            position: relative;
        }
        .worker .person-body::after {
            content: '';
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            width: 25px;
            height: 3px;
            background: #000;
            border-radius: 2px;
        }
        .person-body::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 30px;
            background: radial-gradient(circle at 30% 30%, #FFFACD, #FFD700);
            border-radius: 50%;
            border: 2px solid #D2B48C;
            box-shadow: 0 3px 4px rgba(0,0,0,0.2);
            /* 面部表情 */
            background-image: radial-gradient(circle at 60% 50%, black 2px, transparent 0),
                              radial-gradient(circle at 40% 50%, black 2px, transparent 0),
                              radial-gradient(circle at 50% 70%, #DC143C 3px, transparent 0);
        }
        .pick-btn {
            padding: 4px 8px;
            font-size: 12px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .pick-btn:hover {
            background: #45a049;
        }
        .count {
            font-size: 12px;
            color: #666;
        }
        #remaining {
            font-size: 20px;
            color: #228B22;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>摘桃子游戏</h1>
        <div id="remaining">剩余桃子：30</div>
        <div class="tree" id="tree"></div>
        <div class="people">
            <div class="person leader">
                <div class="person-body"></div>
                <div class="demand">领导</div>
            </div>
            <!-- 6个工人 -->
            <div class="person worker" data-index="0">
                <div class="person-body"></div>
                <div class="demand">工人1</div>
                <button class="pick-btn">摘一个</button>
                <div class="count">已摘：0个</div>
            </div>
            <div class="person worker" data-index="1">
                <div class="person-body"></div>
                <div class="demand">工人2</div>
                <button class="pick-btn">摘一个</button>
                <div class="count">已摘：0个</div>
            </div>
            <div class="person worker" data-index="2">
                <div class="person-body"></div>
                <div class="demand">工人3</div>
                <button class="pick-btn">摘一个</button>
                <div class="count">已摘：0个</div>
            </div>
            <div class="person worker" data-index="3">
                <div class="person-body"></div>
                <div class="demand">工人4</div>
                <button class="pick-btn">摘一个</button>
                <div class="count">已摘：0个</div>
            </div>
            <div class="person worker" data-index="4">
                <div class="person-body"></div>
                <div class="demand">工人5</div>
                <button class="pick-btn">摘一个</button>
                <div class="count">已摘：0个</div>
            </div>
            <div class="person worker" data-index="5">
                <div class="person-body"></div>
                <div class="demand">工人6</div>
                <button class="pick-btn">摘一个</button>
                <div class="count">已摘：0个</div>
            </div>
        </div>
    </div>
    <script>
        let remainingPeaches = 30;
        const workerCounts = new Array(6).fill(0); // 记录每个工人的已摘数量

        // 初始化桃子（限制在树冠区域：x 400-600px，y 50-250px）
        const tree = document.getElementById('tree');
        for(let i=0; i<30; i++){
            const peach = document.createElement('div');
            peach.className = 'peach';
            const x = Math.random()*200 + 400; // 400-600px
            const y = Math.random()*200 + 50; // 50-250px
            peach.style.left = `${x}px`;
            peach.style.top = `${y}px`;
            tree.appendChild(peach);
        }

        // 绑定工人按钮点击事件
        document.querySelectorAll('.worker .pick-btn').forEach((btn, index) => {
            btn.addEventListener('click', () => {
                if(remainingPeaches <= 0){
                    alert('桃子已摘完！');
                    return;
                }
                // 更新计数
                workerCounts[index]++;
                remainingPeaches--;
                // 更新显示
                btn.parentElement.querySelector('.count').textContent = `已摘：${workerCounts[index]}个`;
                document.getElementById('remaining').textContent = `剩余桃子：${remainingPeaches}`;
                // 移除一个桃子
                const peaches = document.getElementsByClassName('peach');
                if(peaches.length > 0) peaches[0].remove();
            });
        });
    </script>
</body>
</html>